<template>
  <div
    v-if="id && visible"
    class="full-container"
    @click.stop>

    <transition name="slide-fade">
      <component
        v-if="showDetail"
        v-bind="$attrs"
        :is="componentName"
        :id="id"
        :type="type"
        style="top: 0"
        @update="handleUpdate"
        @close="handleClose" />
    </transition>
  </div>
</template>

<script>
/**
 * Create by yxk at 2020/6/9
 */
import ProductDetail from '../product/Detail' // 产品详情
import PurchaseSupplierDetail from '../purchase/supplier/Detail' // 供应商详情
import PurchaseOrderDetail from '../purchase/order/Detail' // 采购订单详情
import PurchaseReturnedDetail from '../purchase/returned/Detail' // 采购退货单详情
import SaleOrderDetail from '../sale/order/Detail' // 销售订单详情
import SaleReturnedDetail from '../sale/returned/Detail' // 销售退货详情
import RepertoryEnterDetail from '../repertory/enter/Detail' // 产品入库详情
import RepertoryOutDetail from '../repertory/out/Detail' // 产品入库详情
import InventoryDetail from '../repertory/check/Detail' // 盘点单详情
import AllocationDetail from '../repertory/move/Detail' // 调拨单详情
import CollectionDetail from '../finance/returnedMoney/Detail' // 回款单详情
import PaymentDetail from '../finance/payment/Detail' // 付款单详情

import { getMaxIndex } from '@/utils/index'

export default {
  name: 'JXCAllDetail',
  components: {
    ProductDetail,
    PurchaseSupplierDetail,
    PurchaseOrderDetail,
    PurchaseReturnedDetail,
    SaleOrderDetail,
    SaleReturnedDetail,
    RepertoryEnterDetail,
    RepertoryOutDetail,
    CollectionDetail,
    PaymentDetail,
    InventoryDetail,
    AllocationDetail
  },
  props: {
    id: {
      type: [String, Number],
      required: true
    },
    type: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      visible: false,

      showDetail: false
    }
  },
  computed: {
    componentName() {
      return {
        jxc_product: 'ProductDetail',
        jxc_supplier: 'PurchaseSupplierDetail',
        jxc_purchase: 'PurchaseOrderDetail',
        jxc_retreat: 'PurchaseReturnedDetail',
        jxc_sale: 'SaleOrderDetail',
        jxc_salereturn: 'SaleReturnedDetail',
        jxc_receipt: 'RepertoryEnterDetail',
        jxc_outbound: 'RepertoryOutDetail',
        jxc_collection: 'CollectionDetail',
        jxc_payment: 'PaymentDetail',
        jxc_inventory: 'InventoryDetail',
        jxc_allocation: 'AllocationDetail'
      }[this.type]
    },

    params() {
      return {
        id: this.id,
        visible: this.visible
      }
    }
  },
  watch: {
    type: {
      handler() {
        this.visible = false
        this.$nextTick(() => {
          this.visible = true
        })
      },
      immediate: true
    },
    params: {
      handler() {
        if (this.id && this.visible) {
          this.$nextTick(() => {
            document.body.appendChild(this.$el)
            this.$el.style.zIndex = getMaxIndex()
            this.showDetail = true
          })
        }
      },
      deep: true,
      immediate: true
    }
  },
  methods: {
    handleUpdate(...obj) {
      this.$emit('update', ...obj)
    },
    handleClose(...obj) {
      this.showDetail = false
      setTimeout(() => {
        this.$emit('close', ...obj)
      }, 350)
    }
  }
}
</script>

<style scoped lang="scss">
  .slide-fade-enter-active,
  .slide-fade-leave-active {
    will-change: transform;
    transition: all 0.35s ease;
  }
  .slide-fade-enter,
  .slide-fade-leave-to {
    transform: translateX(100%);
  }

  .full-container {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    overflow: auto;
    margin: 0;
    background-color: rgba(0, 0, 0, 0.3);
  }
</style>
